<template>
    <div class="h-full overflow-hidden flex flex-col">
        <div class="flex-1 overflow-auto pt-[26px] pb-[80px] px-[56px]">
            <div class="flex flex-row items-center gap-[10px]">
                <div class="bg-theme w-1 h-5 rounded-xs"></div>
                <span class="text-theme text-[18px] font-bold">编辑公司介绍</span>
            </div>
            <section class="mt-6 2xl:w-[750px]">
                <Form v-bind="defaultFormProps" 
                    layout="vertical"
                    size="large"
                    :rules
                    :model="formState"
                    ref="formRef"
                >
                    <FormItem name="shortIntro">
                        <template #label>
                            <span class="font-medium text-base text-primary">
                                一句话介绍
                                <span class="font-normal text-xs text-third">
                                    （非必填）
                                </span>
                            </span>
                        </template>
                        <a-input v-model:value="formState.shortIntro" style="width: 100%;" placeholder="请输入一句话介绍" show-count :maxlength="20"/>
                    </FormItem>
                    <FormItem name="intro">
                        <template #label>
                            <span class="font-medium text-base text-primary">
                                公司简介
                            </span>
                        </template>
                        <a-textarea v-model:value="formState.intro" style="width: 100%;" placeholder="请输入公司简介" show-count :maxlength="1000" :rows="6"/>
                    </FormItem>
                    <FormItem name="progresing">
                        <template #label>
                            <span class="font-medium text-base text-primary">
                                发展历程
                                <span class="font-normal text-xs text-third">
                                    （非必填）
                                </span>
                            </span>
                        </template>
                        <a-textarea v-model:value="formState.progresing" style="width: 100%;" placeholder="请输入发展历程" show-count :maxlength="800" :rows="6"/>
                    </FormItem>
                    <FormItem name="honor">
                        <template #label>
                            <span class="font-medium text-base text-primary">
                                获得荣誉
                                <span class="font-normal text-xs text-third">
                                    （非必填）
                                </span>
                            </span>
                        </template>
                        <a-textarea v-model:value="formState.honor" style="width: 100%;" placeholder="请输入公司荣誉" show-count :maxlength="500" :rows="6"/>
                    </FormItem>
                    <FormItem name="culture">
                        <template #label>
                            <span class="font-medium text-base text-primary">
                                公司文化
                                <span class="font-normal text-xs text-third">
                                    （非必填）
                                </span>
                            </span>
                        </template>
                        <a-textarea v-model:value="formState.culture" style="width: 100%;" placeholder="请输入公司文化" show-count :maxlength="800" :rows="6"/>
                    </FormItem>
                </Form>
            </section>
        </div>
        <div class="px-[56px] box-border h-[88px] border-t border-solid border-t-[#EEEEEE] relative">
            <div class="flex flex-row justify-end items-center h-full 2xl:w-[750px]">
                <a-button type="primary" class="rounded-sm w-[124px]" size="large" :loading="formLoading" @click="handleSubmit()">
                    保存
                </a-button>
            </div>
            <div class="text-[#ACAEB2] text-sm flex flex-row items-center gap-1 cursor-pointer absolute left-[56px] top-[34px]">
                上传注意事项
                <GpFontIcon name="icon-yiwen1"/>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { Form, FormItem, message } from 'ant-design-vue';
import { defaultFormProps } from '@/constants/comp-setting';
import type { CompanyInfoResult, CompanyIntroduceRequest } from '@/api/siderBar/model';
import { postCompanyinfoIntroduce } from '@/api/siderBar/companyInfo';

defineOptions({
    name: "CompanyIntro"
})

type Props = Partial<CompanyInfoResult>
const props = defineProps<Props>()
const emit = defineEmits<{
    refresh: []
}>()
type FormState = {
    shortIntro?: string
    intro?: string
    progresing?: string
    honor?: string
    culture?: string
};
const {
    formLoading,
    formRef,
    formState,
    rules,
    handleFormSubmit
} = useFormState<FormState>({
    getInitialState() {
        return {}
    },
    rules: {
        intro: { required: true, message: '请输入公司简介' }
    }
})
watch(() => props.introduce, () => {
    if (props.introduce) {
        populate()
    }
}, {
    immediate: true
})
function populate() {
    const introduce = props.introduce
    if (introduce) {
        if (introduce.briefIntroduce) {
            formState.value.shortIntro = introduce.briefIntroduce
        }
        if (introduce.introduce) {
            formState.value.intro = introduce.introduce
        }
        if (introduce.history) {
            formState.value.progresing = introduce.history
        }
        if (introduce.honor) {
            formState.value.honor = introduce.honor
        }
        if (introduce.culture) {
            formState.value.culture = introduce.culture
        }
    }
}
async function handleSubmit() {
    await handleFormSubmit(values => {
        const params: CompanyIntroduceRequest = {}
        if (values.shortIntro) {
            params.briefIntroduce = values.shortIntro
        }
        if (values.intro) {
            params.introduce = values.intro
        }
        if (values.progresing) {
            params.history = values.progresing
        }
        if (values.honor) {
            params.honor = values.honor
        }
        if (values.culture) {
            params.culture = values.culture
        }
        return postCompanyinfoIntroduce(params)
    })
    message.success('保存成功')
    emit("refresh")
}
</script>